<template>
  <div>
    <div class="footer">
      <div class="bottom-tab">
          <div class="tab-item"  @click="switchTo('/')">
              <img :src="'/' === $route.path ? tabBarImgArr[0].selected : tabBarImgArr[0].normal" alt="首页">
              <span :class="{on: '/' === $route.path}">首页</span>
          </div>
          <div class="tab-item" @click="switchTo('/integral')">
              <img :src="'/integral' === $route.path ? tabBarImgArr[2].selected : tabBarImgArr[2].normal" alt="会员商城">
              <span :class="{on: '/integral' === $route.path}">积分商城</span>
          </div>
          <div class="tab-item" @click="switchTo('/Vip')">
              <img :src="'/Vip' === $route.path ? tabBarImgArr[3].selected : tabBarImgArr[3].normal" alt="积分商城">
              <span :class="{on: '/Vip' === $route.path}">会员商城</span>
          </div>
          <div class="tab-item" @click="switchTo('/User')">
              <img :src="'/User' === $route.path ? tabBarImgArr[4].selected : tabBarImgArr[4].normal" alt="我的">
              <span :class="{on: '/User' === $route.path}">我的</span>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Footer',
  data () {
    return {
      tabBarImgArr:[   //图片切换
        {normal: require('../../assets/tab1.png'), selected: require('../../assets/tab1-pink.png')},
        {normal: require('../../assets/tab2.png'), selected: require('../../assets/tab2-pink.png')},
        {normal: require('../../assets/tab3.png'), selected: require('../../assets/tab3-pink.png')},
        {normal: require('../../assets/tab4.png'), selected: require('../../assets/tab4-pink.png')},
        {normal: require('../../assets/tab5.png'), selected: require('../../assets/tab5-pink.png')}
      ]
    }
  },
  methods:{
    switchTo(path){
      // console.log(this.$router)
      this.$router.push(path)
    },
    boun:function(){
       layer.open({
        content: '该功能暂未开放'
        ,btn: '我知道了'
      });
      // this.$router.push({path: '/integral'})
      // layer.open({
      //   content: '您确定要刷新一下本页面吗？'
      //   ,btn: ['刷新', '不要']
      //   ,yes: function(index){
      //     // location.reload();
      //     // this.$router.replace({path:'/integral'});
      //     // this.$router.push({name: '/integral'})
      //     layer.close(index);
      //   }
      // });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
img{
  width:20px ;
  height:20px;
  margin-top:6px;
}
.footer{
  position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 49px;
    background: #FFF;
    z-index: 10;
    box-shadow: 1px -1px 10px #eae7e7;
}
.tab-item{
  width:25%;
  float: left;
  display: inline-block;
  text-align: center;
}
.footer span{
  width:100%;
  display: inline-block;
  text-align: center;
  font-size:12px;
}
</style>
